<template>
	<view class="tabs">
		<view class="tab-item" :class="{active:item.value == value}" v-for="(item,index) in tabs" :key="index"
			@click="changeTab(item.value)">{{item.title}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: () => '1'
			}
		},
		data() {
			return {
				tabs: [{
					title: '近7日',
					value: '1'
				}, {
					title: '近15日',
					value: '2'
				}, {
					title: '近30日',
					value: '3'
				}]
			}
		},
		methods: {
			changeTab(value) {
				this.$emit('change', {
					value
				})
			}
		}
	}
</script>

<style lang="scss">
	view {
		line-height: 1;
	}
	.tabs {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.tab-item {
			font-weight: 600;
			font-size: 25rpx;
			color: #8E8E8E;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			&.active {
				position: relative;
				color: #000000;

				&::after {
					content: '';
					position: absolute;
					bottom: -10rpx;
					width: 28rpx;
					height: 3rpx;
					background: #8E8E8E;
					border-radius: 2rpx;
				}
			}
		}
	}
</style>